<template>
  <div class="hello">

<!--
    <div style="width:512px;height:300px;margin:auto">
      <LivePlayer
          videoUrl="#"
          waterMark="水印"/>
    </div>

    <div style="width:512px;height:300px;margin:auto">
      <LivePlayer
          videoUrl="#"
          waterMark="水印-高清"/>
    </div>

    <div style="width:1080px;height:920px;margin:auto">
      <LivePlayer
          videoUrl="#"
          waterMark="水印-高清"/>
    </div>

    <div style="width:1080px;height:920px;margin:auto">
      <LivePlayer
          videoUrl="#"
          waterMark="水印-回放" live digitalZoom/>
    </div>
-->

    <div style="width:1080px;height:920px;margin:auto">
      <LivePlayer
          videoUrl="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8"
          waterMark="水印-直播" live digitalZoom/>
    </div>

    <div style="width:1080px;height:920px;margin:auto">
      <LivePlayer
          videoUrl="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
          waterMark="水印-回放" live digitalZoom/>
    </div>

<!-- 西瓜 先不使用 有点问题 好像   -->
    <div style="width:1080px;height:920px;margin:auto">
      <Xgplayer :config="config" @player="Player = $event"/>
    </div>

    <div style="width:512px;height:300px;margin:auto" class="palyer2">
      <LivePlayer @snapOutside="snapOutside" ref="player2"
                  videoUrl="http://cloud.ruiboyun.net/vod/vod/3bahma4c/index.m3u8" live digitalZoom/>
    </div>

    <h1>{{ msg }}</h1>
    <h3>相关说明</h3>
    <ul>
      <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property" target="_blank"
             rel="noopener">属性(Property)</a></li>
      <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E6%96%B9%E6%B3%95-method" target="_blank"
             rel="noopener">方法(Method)</a></li>
      <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E4%BA%8B%E4%BB%B6-event" target="_blank"
             rel="noopener">事件(Event)</a></li>
    </ul>

    <h3>方法调用示例</h3>
    <ul>
      <li><a @click="pause" rel="noopener">暂停</a></li>
      <li><a @click="play" rel="noopener">播放</a></li>
      <li><a @click="snap" rel="noopener">截图数据</a></li>
    </ul>
    <br/>
    <br/>
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
import Xgplayer from 'xgplayer-vue';

export default {
  name: 'LivePlayerDemo',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    LivePlayer,
    Xgplayer
  },
  props: {
    msg: String
  },
  data () {
    return {
      config: {
        id: 'vs1',
        url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'
      },
      Player: null
    }
  },
  methods: {
    pause: function () {
      this.$refs.player2.pause();
    },
    play: function () {
      this.$refs.player2.play();
    },
    snap: function () {
      this.$refs.player2.snap();
    },
    snapOutside: function (snapData) {
      alert(snapData);
      console.log(snapData);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}

a {
  color: #42b983;
}
</style>
